<template>
  <div class="box">
    <h1>404</h1>
    <div>访问错误将在{{ time }}秒后返回</div>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue';
import router from "@/router";


const time = ref(3);

const startCountdown = () => {
  const interval = setInterval(() => {
    if (time.value > 0) {
      time.value -= 1;
    } else {
      clearInterval(interval);
      onCountdownEnd();
    }
  }, 1000);
};

const onCountdownEnd = () => {
  // 倒计时结束时执行的函数
  router.push({path: "/"})
};
onMounted(() => {

  startCountdown();
})

</script>

<style scoped>
* {
  padding: 0;
}

.box {
  width: 100%;
  height: 100%;
  text-align: center;
}

h1 {
  align-content: center;
  font-size: 250px;
  flex: 1;
  display: flex;
  justify-content: center;
}


</style>
